@charset "utf-8";
/* CSS Document */

<style>
.accordion { /* el contenedor */
  list-style: none;
  overflow: hidden;
  margin: 0;
  width: 700px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  }
  
.div-accordion{
	  padding-left:100px;
}

.accordion h2 { /* el título */
  color: #DEF;
  font-family: Helvetica;
  font-size: 20px;
  margin: 0 0 0.5em;
  text-align: center;
}
.accordion li { /* cada item de la lista */
  float: left;
  overflow: hidden;
  height: 270px; /* la altura máxima que le daremos */
  width: 200px; /* el ancho por defecto */
  /* las propeidades de animación */
  -moz-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  -moz-transition-delay: 0.15s;
  -webkit-transition-delay: 0.15s;
  -o-transition-delay: 0.15s;
  transition-delay: 0.15s;
  list-style:none;
 
}
.accordion li:first-of-type { /* bordes redondeados de la primera pestaña */
  -moz-border-radius: 10px 0 0 10px;
  -webkit-border-radius: 10px 0 0 10px;
  -o-border-radius: 10px 0 0 10px;
  border-radius: 10px 0 0 10px;
}
.accordion li:last-of-type{ /* bordes redondeados de la última pestaña */
  -moz-border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0 10px 10px 0;
  -o-border-radius: 0 10px 10px 0;
  border-radius: 0 10px 10px 0;
}
.accordion div { /* el contenido */
  padding: 5px;
}
.accordion:hover li {
   /* al colocar el cursor encima de cualquiera se reduce el ancho de todas */
  width: 100px;
}
.accordion li:hover {
   /* y aumenta el ancho de la que estamos seleccionando */
  width: 310px;
}
/* los colores de cada pestañ */
.slide-01 {background:#404951; color:#FFF;}
.slide-02 {background:#606971; color:#FFF;}
.slide-03 {background:#808991; color:#FFF;}
</style>

